<template>
  <div>
    <!-- 头部主体区 -->
    <div class="head">
      <!-- 中间区域 -->
      <div class="leftArea">
        <!-- 左边标题与Login -->
        <a class="leftLogin" @click="goHome">
          <img src="../../assets/image/3.png" alt="" />
          <h1>网易云音乐</h1>
        </a>
        <!-- 左边主体区 -->
        <div class="leftContent">
          <ul class="leftContentUl">
            <li>
              <a href="JavaScript:;" @click="goHome">发现音乐</a>
            </li>
            <li>
              <a href="JavaScript:;" @click="gotomy">我的音乐</a>
            </li>
            <li>
              <a href="JavaScript:;">关注</a>
            </li>
            <li>
              <a href="JavaScript:;">商城</a>
            </li>
            <li>
              <a href="JavaScript:;">音乐人</a>
            </li>
            <li>
              <a href="JavaScript:;">下载客户端</a>
            </li>
          </ul>
        </div>
        <!-- 右边文rigthloginimg本框 -->
        <div class="rigthInput" @blur="changeblur">
          <input type="text" v-model="suggestions" @focus="changefocus" />
          <!-- 搜索嘞 -->
          <div
            class="addtext"
            ref="addtext"
            :style="{ display: suggestions.length != 0 ? 'block' : 'none' }"
          >
            <p class="a-t">
              <a href="javascript:;">搜索{{ suggestions }}的相关用户 ></a>
            </p>
            <div class="a-ba">
              <div class="a-ba-l">
                <span>单曲</span>
                <ul class="odd">
                  <li v-for="suggest in suggestList.songs" :key="suggest.id">
                    <!-- <router-link :to="`/song?ids=${suggest.id}`">{{ suggest.name }}</router-link> -->
                    <a @click="gosong(suggest.id)">{{ suggest.name }}</a>
                  </li>
                </ul>
              </div>
              <div class="a-ba-l">
                <span>歌手</span>
                <ul class="odd">
                  <li @click="goHotproduction(suggestList.artists[0].id)">
                    <a href="javascript:;">{{ singerName }}</a>
                  </li>
                </ul>
              </div>
              <div class="a-ba-l">
                <span>专辑</span>
                <ul class="odd">
                  <li
                    @click="goAlbumpage(suggest.id)"
                    v-for="suggest in suggestList.albums"
                    :key="suggest.id"
                  >
                    <a href="javascript:;">{{ suggest.name }}</a>
                  </li>
                </ul>
              </div>
              <div class="a-ba-l">
                <span>歌单</span>
                <ul class="odd">
                  <li
                    v-for="suggest in suggestList.playlists"
                    :key="suggest.id"
                    @click="goPalyLists(suggest.id)"
                  >
                    <a href="javascript:;">{{ suggest.name }}</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <!-- 右边创作者中心 -->
        <div class="rigthFramer">
          <a href="#">创作者中心</a>
        </div>
        <!-- 右边登录 -->
        <div class="rigthlogin" v-if="!token">
          <a href="#" @click="changelogin">登录</a>
        </div>
        <div v-else>
          <div
            class="rigthloginimg"
            @mouseover="mouseoverup"
            @mouseout="mouseoutup"
            v-if="getloginList.profile"
          >
            <div class="rigtop">
              <a @click="gouserhome(getloginList.profile.userId)"><img :src="getloginList.profile.avatarUrl" alt="" /></a>
              <span
                class="rigthlogspan"
                ref="rigthlogspans"
                v-show="prtivatesum"
                >{{ prtivatesum }}</span
              >
            </div>

            <div class="loglist" ref="loglists">
              <div class="rigparentbox">
                <div class="rigparent"></div>
              </div>
              <span @click="gouserhome(getloginList.profile.userId)"
                >我的主页</span
              >
              <span class="logspan" @click="goM()"
                >我的消息
                <span class="rigthlogspan" v-show="prtivatesum">{{
                  prtivatesum
                }}</span>
              </span>
              <span @click="goUserLevel()">我的等级</span>
              <span>vip会员</span>
              <span @click="goUserUpdate()">个人设置</span>
              <span @click="loginupname">退出登录 </span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <Login ref="mylogin" />
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      // 文本框信息
      suggestions: "",
      suggestList: {},
      singerName: "",
      // token: localStorage.getItem("token"),
      // loginmessage: JSON.parse(localStorage.getItem("loginmessage")),
    };
  },
  mounted() {
    // this.
    this.loginup();
  },
  methods: {
    //检查是否有登录登录
    loginup() {
      if (this.loginmessage.account) {
        // console.log(this.loginmessage.accavatarUrlount.id);
        this.$store.dispatch("getloginList", this.loginmessage.account.id);
      }
    },

    async getSearchSuggestions(val) {
      const results = await this.$API.reqSearchSuggestions(val);
      // console.log(results);
      if (results.code == 200) {
        this.suggestList = results.result || {};
        this.singerNames();
      } else {
        // alert("请求失败");
        this.$msg.eerror("获取文本框请求失败");
      }
    },
    // 简化名字
    singerNames() {
      if (this.suggestList.artists) {
        this.singerName = this.suggestList.artists[0].name || "";
        console.log(this.singerName);
      } else {
        this.singerName = "";
      }
    },
    gotomy(){
      this.$router.push(`/my`)
    },
    // 修改提示框
    changelogin() {
      // this.dialogVisible = true
      this.$refs.mylogin.changeDialog();
    },

    // 改变搜索框
    changeblur() {
      this.$refs.addtext.style.display = "none";
    },
    changefocus() {
      if (this.suggestions != "") {
        this.$refs.addtext.style.display = "block";
      }
    },

    // 移入改变属性
    mouseoverup() {
      // console.log("zhang")
      this.$refs.rigthlogspans.style.display = "none";
      this.$refs.loglists.style.display = "block";
    },
    // 移除
    mouseoutup() {
      if (this.prtivatesum) {
        this.$refs.rigthlogspans.style.display = "block";
      }
      this.$refs.loglists.style.display = "none";
    },

    // 退出登录
    async loginupname() {
      const result = await this.$API.reqLogout();
      if (result.code == 200) {
        localStorage.removeItem("loginmessage")
        localStorage.removeItem("prtivatesum")
        localStorage.removeItem("token")
        localStorage.removeItem("loginList")
        this.$store.commit("GETPHONELOGIN",'');
        this.$store.commit("GETLOGINLIST",'');
        this.$store.commit("CHANGPRTIVSUM",'');
        this.$router.push(`/home`);
      } else {
        this.$msg.error("退出失败");
      }
    },

    /* 去 */
    goM() {
      this.$router.push(`/m`);
    },
    goUserLevel() {
      this.$router.push(`/userlevel`);
    },
    goUserUpdate() {
      this.$router.push(`/userupdate`);
    },
    // 去别的页面
    gosong(id) {
      // http://localhost:8080/#/song?ids=28267047
      // console.log(id)
      this.singerName = "";
      this.$router.replace(`/song?ids=${id}`);
    },
    // /playlists:id? 去歌单页
    goPalyLists(id) {
      this.singerName = "";
      this.$router.push(`/playlists?id=${id}`);
    },
    // 跳转到albumpage页面
    goAlbumpage(id) {
      // console.log(id)
      this.singerName = "";
      this.$router.push(`/albumpage?id=${id}`);
    },
    // 去主页
    goHome() {
      this.$router.replace("/");
    },
    // 去歌手详情页
    goHotproduction(id) {
      this.$router.push(`/artist?id=${id}`);
    },
    //去个人主页
    gouserhome(id) {
      this.$router.push(`/userhome?id=${id}`);
    },
  },
  // 监听数据变化 然后发送请求 因为不是发送一次
  watch: {
    suggestions(val) {
      if (val.trim().length != 0) {
        console.log(val);
        // this.$refs.changaddtext =
        this.getSearchSuggestions(val);
      } else {
        // return
        this.suggestList = {};
      }
    },
    token(val) {
      this.loginup();
    },
  },
  computed: {
    ...mapState({
      getloginList: (state) => {
        return state.User.getloginList || {};
      },
      prtivatesum: (state) => {
        return state.User.prtivatesum;
      },
      token: (state) => {
        return state.User.token;
      },
      loginmessage: (state) => {
        return state.User.loginmessage;
      },
    }),
  },
  // computed: {},
};
</script>

<style lang="less" scope>
* {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
  color: rgb(210, 219, 225);
}
.rigthlogspan {
  position: absolute;
  display: block;
  font-size: 13px;
  width: 17px;
  line-height: 18px;
  height: 17px;
  background-color: red;
  border-radius: 14px;
  text-align: center;
  border: solid 3px #fff;
}
// 头部主体
.head {
  color: rgb(210, 219, 225);
  height: 70px;
  background-color: rgb(36, 36, 36);
  width: 100%;
  min-width: 1276px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;

  // 头部中间内容
  .leftArea {
    display: flex;
    width: 1100px;
    justify-content: space-between;
    align-items: center;
    .leftLogin {
      text-decoration: none;
      img {
        height: 50px;
        width: 50px;
        margin-right: 5px;
        border-radius: 50px;
      }
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-grow: 1;
    }
    .leftContent {
      // float: left;
      flex-grow: 5;
      .leftContentUl {
        display: flex;
        font-size: 14px;
        justify-content: space-between;
        align-items: center;

        li a {
          width: 100%;
          display: block;
          line-height: 70px;
          padding: 0 19px;
          // display: block;
        }
        li:hover {
          background-color: rgb(0, 0, 0);
          color: #fff;
          a:hover {
            color: #fff;
          }
        }
      }
    }
    .rigthInput {
      margin-left: 30px;
      position: relative;
      input {
        border-radius: 25px;
        height: 32px;
        // background-image: url(../assets/logo.png) ;
      }
      .addtext {
        position: absolute;
        display: none;
        height: 350px;
        width: 270px;
        z-index: 9999;
        background-color: #fff;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        .a-t {
          height: 35px;
          width: 270px;
          border-bottom: solid 1px rgb(226, 226, 226);

          a {
            color: rgb(57, 55, 55);
            font-size: 10px;
            margin-left: 10px;
            // margin-top: 15px;
            // padding-top: 15px;
            line-height: 40px;
          }
          a:hover {
            background-color: aliceblue;
          }
        }
        .a-ba {
          // display: flex;
          .a-ba-l {
            display: flex;
            span {
              margin: 10px 20px;
              color: black;
            }
            .odd {
              // display: flex;
              line-height: 30px;
              // margin-top:10px;
              padding-bottom: 10px;
              padding: 5px 5px;
              border-left: solid 1px rgb(226, 226, 226);
              border-bottom: solid 1px rgb(226, 226, 226);
              li {
                // 文字太长用省略号表示
                a {
                  color: #000;
                  display: block;
                  width: 176px;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }
              }
            }
          }
          // .a-ba-r{}
        }
      }
    }
    .rigthFramer {
      font-size: 10px;
      margin: 0 20px;
      height: 30px;
      width: 80px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-left: 20px;
      border: 1px solid rgb(79, 79, 79);
      border-radius: 30px;
    }
    .rigthFramer:hover {
      border: 1px solid #fff;
      border-radius: 30px;
      a {
        color: #fff;
      }
    }

    .rigthloginimg {
      z-index: 999;
      position: relative;
      .rigtop {
        img {
          height: 30px;
          width: 30px;
          // text-decoration: 10px;
          border-radius: 30px;
        }
        .rigthlogspan {
          right: -12px;
          top: -8px;
        }
      }
      .rigparent {
        width: 0;
        height: 0;
        position: absolute;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid transparent;
        border-bottom: 10px solid #ccc;
      }
      .loglist {
        display: none;
        position: absolute;
        border: 8px solid rgba(255, 255, 255, 0);
        left: -64px;
        width: 158px;
        top: 40px;
        background-color: #2b2b2b;
        span {
          display: block;
          line-height: 40px;
          text-align: center;
        }
        .logspan {
          position: relative;
          .rigthlogspan {
            right: 15px;
            top: 12px;
            line-height: 17px;
          }
        }
        .rigparentbox {
          position: absolute;
          height: 20px;
          width: 31px;
          top: -26px;
          left: 65px;
          .rigparent {
            width: 0;
            height: 0;
            position: absolute;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-top: 10px solid transparent;
            border-bottom: 10px solid #2b2b2b;
          }
        }
      }
    }

    .rigthlogin {
      a {
        font-size: 10px;
        color: rgb(98, 117, 126);
      }
      a:hover {
        color: rgb(158, 155, 155);
      }
    }
  }
}
</style>
